<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import axios from "@/util/axios";

const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 10
});

const total = ref(0);

const tableData = ref([]);

const initProductHistoryList = async () => {
  const res = await axios.post("admin/productHistory/list", queryForm.value);
  tableData.value = res.data.productHistoryList;
  total.value = res.data.total;
};

initProductHistoryList();

// 实现页数
const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  initProductHistoryList();
};
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  initProductHistoryList();
};


const formatTime = (timeStr) => {
  const date = new Date(timeStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>

<template>
  <!-- el-card悬浮框 -->
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input
          placeholder="请输入搜索内容"
          v-model="queryForm.query"
          clearable
        ></el-input>
      </el-col>
      <el-button type="button" :icon="Search" @click="initProductHistoryList">搜索</el-button>
    </el-row>
    <el-table :data="tableData" height="500" style="width: 100%">
      <el-table-column prop="id" label="#id" width="80" />
      <el-table-column prop="openid" label="用户唯一标识符" width="300" />
      <!-- <el-table-column prop="productId" label="果蔬商品id" width="200" /> -->
      <el-table-column prop="name" label="果蔬名" width="300" />
      <el-table-column prop="price" label="价格" width="100" />
      <el-table-column prop="vtime" label="浏览时间" width="200">
  <template v-slot="scope">
    {{ formatTime(scope.row.vtime) }}
  </template>
</el-table-column>


      <el-table-column prop="productPic" label="果蔬图片" width="200">
        <template v-slot="scope">
          <img :src="'http://localhost:8080/image/fiery/'+scope.row.productPic" width="100" height="100">
        </template>
      </el-table-column>



    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<style scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
.el-pagination {
  padding-top: 15px;
  box-sizing: border-box;
}
</style>